<template>
  <div class="navHeader">
    <van-nav-bar :fixed="true">
      <template #left>
        <van-icon name="manager-o" size="25" />
      </template>
      <template #title>
        <van-search
          v-model="value"
          shape="round"
          placeholder="请输入搜索关键词"
        />
      </template>
      <template #right>
        <van-icon name="comment-o" size="25" badge="99" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
// import { NavBar } from 'vant';
export default {
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style lang="less" scoped>
.navHeader {
  /deep/ .van-nav-bar__title {
    max-width: 80%;
    .van-search {
      width: 280px;
    }
  }
}
</style>
